// 定义 构造函数 
// 参数1: 标签对象
// 参数2: 数据数组
class SetGlass{
    constructor(element , imgArr){
        // 定义属性存储 参数
        this.ele = element;
        this.arr = imgArr;
        // 获取标签对象
        this.show = this.ele.querySelector('.show');
        this.img = this.show.querySelector('img');
        this.mask = this.show.querySelector('.mask');
        this.list = this.ele.querySelector('ul');
        this.glass = this.ele.querySelector('.glass');

        // 定义属性 准备 存储数据
        this.lis ;
    }

    // 入口函数
    init(){
        this.setPage();
        this.setMouse();
        this.setList();
        this.setMouseMove();
    }

    // 动态渲染页面
    setPage(){
        // 设定 显示区 img标签 加载 数组中 第一个单元的图片
        this.img.setAttribute( 'src' , `./images/${this.arr[0].large}` );
    
        // 谁定放大镜 背景图片 加载 数组中 第一个单元的图片
        this.glass.style.backgroundImage = `url('./images/${this.arr[0].large}')`;
    
        // 生成 list 中 li>img 标签
        let str = '';
        this.arr.forEach((item,key)=>{
            str += key === 0 ? `<li><img class="active" index="${key}" src="./images/${item.small}"></li>` :  `<li><img index="${key}" src="./images/${item.small}"></li>` ;               

        })
        this.list.innerHTML = str;
    
        // 获取所有的 ul>li>img
        this.images = this.list.querySelectorAll('li>img');
    }

    // 鼠标的移入移出
    setMouse(){
        // 移入 显示区 时 让 遮盖层 放大镜 显示
        this.show.addEventListener( 'mouseenter' , ()=>{
            // 遮盖层 放大镜 显示
            this.mask.style.display = 'block';
            this.glass.style.display = 'block';
        })

        // 移出 显示区 时 让 遮盖层 放大镜 隐藏
        this.show.addEventListener( 'mouseleave' , ()=>{
            // 遮盖层 放大镜 隐藏
            this.mask.style.display = 'none';
            this.glass.style.display = 'none';
        })
    }

    // 选项卡效果
    setList(){
        // 动态生成的li>img标签的父级标签ul 绑定事件
        this.list.addEventListener( 'mouseover' , e=>{
            // 鼠标经过的是img图片标签
            if( e.target.tagName === 'IMG' ){
                // 给所有的img标签删除 class,active
                this.images.forEach( item => {
                    // item 是 图片标签
                    item.classList.remove('active');
                })

                
                // 给鼠标经过的标签 添加 class,active
                e.target.classList.add('active');

                // 设定 显示区 图片内容
                this.img.setAttribute( 'src' , `./images/${this.arr[e.target.getAttribute('index')-0].large}` );
            
                // 设定 放大镜 背景图片
                this.glass.style.backgroundImage = `url('./images/${this.arr[e.target.getAttribute('index')-0].large}')`;

            }

            

        })
    }

    // 鼠标拖拽
    setMouseMove(){
        // 给 显示区 添加 鼠标移动事件
        this.show.addEventListener('mousemove' , e=>{
            // 触发鼠标移动事件 一定是鼠标已经移入 显示区
            // 此时 遮盖层 放大镜 都显示 都有占位 
            // 获取 占位数据

            // 左 上 间距
            let glassLeft = this.ele.offsetLeft ;
            console.log(glassLeft); 
            let glassTop = this.ele.offsetTop ; 
            // 显示区 边框线
            let showBorderLeft = this.show.clientLeft;
            console.log(showBorderLeft);
            let showBorderTop = this.show.clientTop;
            // 显示区 占位 内容+padding 
            let showWidth = this.show.clientWidth;
            let showHeight = this.show.clientHeight;
            // 遮盖层 占位 内容+padding+border
            let maskWidth = this.mask.offsetWidth;
            let maskHeight = this.mask.offsetHeight;

            // 获取坐标位置 
            // 鼠标坐标 - 外边距 - 边框线 - 遮盖层占位/2
            let x = e.pageX - glassLeft - showBorderLeft - maskWidth/2 ;
            let y = e.pageY - glassTop - showBorderTop - maskHeight/2 ;

            // 设定极值
            x = x < 0 ? 0 : x ;
            y = y < 0 ? 0 : y ;

            x = x > showWidth - maskWidth ?  showWidth - maskWidth : x ;
            y = y > showHeight - maskHeight ? showHeight - maskHeight : y ;

            // 将数值设定为 遮盖层定位
            this.mask.style.left = x + 'px'; 
            this.mask.style.top = y + 'px'; 

            // 设定 放大镜 背景图片 定位数值
            // 1, 定位数值 和 遮盖层定位 数值 符号相反
            // 2, 定位的数值 是 遮盖层定位 数值 乘以 比例关系
            // 遮盖层:放大镜 = 显示区:背景图 = 遮盖层定位 : 背景图定位
            this.glass.style.backgroundPosition = `${-4*x}px ${-4*y}px`; 
        })
    }
}

//  // 外部的大盒子
//      // const oContainer = document.querySelector('.container')
//      const oMedia = document.querySelector('.media')
//      const oA = document.querySelector('.A')
//      const oImg = document.querySelector('.media-object')
//      const oMask = document.querySelector('.mask')
//      const oGlass = document.querySelector('.glass')
//      // console.log(oMask);
//      // 给显示区域 添加鼠标移动事件
//      oA.addEventListener('mousemove',e=>{
//        // 触发鼠标移动事件 一定是鼠标已经移入 显示区
//        // 此时 遮盖层 放大镜 都显示 都有占位 
//        // 获取 占位数据
 
//        // 左 上 间距   求的是整体盒子与浏览器的间距
//        let containerleft = oMedia.getBoundingClientRect().left 
//        let containertop = oMedia.getBoundingClientRect().top 
//        // console.log(containerleft,containertop); 
 
//        // 显示区域的边框线占位
//        let aborderleft = oImg.clientLeft
//        let abordertop = oImg.clientTop
//        // console.log(aborderleft,abordertop);    0 0
 
//        // 显示区 占位 内容+padding 
//        let aWidth = oImg.clientWidth;
//        let aHeight = oImg.clientHeight;
//        // console.log(aWidth,aHeight);                     
 
//        // 遮盖层 占位 内容+padding+border
//        let maskWidth = oMask.offsetWidth;
//        let maskHeight = oMask.offsetHeight;
//        // console.log(maskWidth,maskHeight);      150 150
 
 
//        // 获取坐标的位置
//        // 鼠标坐标 - 外边距 - 边框线 - 遮盖层占位/2
//        let x = e.pageX - containerleft - aborderleft - maskWidth/2
//        let y = e.pageY - containertop - abordertop - maskHeight/2
 
 
//        // // 设定极值
//        x = x < 0 ? 0 : x
//        y = y < 0 ? 0 : y
 
//        x = x > aWidth - maskWidth ?  aWidth - maskWidth : x ;
//        y = y > aHeight - maskHeight ?  aHeight - maskHeight : y ;